<template>
	<div class="hello">
		<div class="testbox">
			<p>加载图片</p>
			<!-- <img src="../assets/video.jpg" width="600" height="240"/> -->
			<img :src="imgSrc" width="600" />
		</div>

		<!--vuecli4-->
		<!-- <img alt="Vue logo" src="../assets/logo.png" />
		<HelloWorld msg="Welcome to Your Vue.js App" /> -->

		<!--element ui-->
		<div class="testbox">
			<p>加载element-ui</p>
			<el-row>
				<el-button>默认按钮</el-button>
				<el-button type="primary">主要按钮</el-button>
				<el-button type="success">成功按钮</el-button>
				<el-button type="info">信息按钮</el-button>
				<el-button type="warning">警告按钮</el-button>
				<el-button type="danger">危险按钮</el-button>
			</el-row>
		</div>

		<!--jquery-->
		<div class="testbox">
			<p>加载jquery</p>
			<div id="myname" class="jquerytext">测试jquery的hide()方法</div>
			<el-button type="info" @click="jqueryfun()">删除红色文字</el-button>
		</div>


		<!--echarts-->
		<div class="testbox">
			<p>加载echarts</p>
			<div id="myChart" :style="{width: '300px', height: '300px'}"></div>
		</div>

		<!--video.js-->
		<div class="testbox">
			<p>加载video.js</p>
			<video id="myVideo" class="video-js">
				<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
			</video>
		</div>

		<!--vue-video-player-->
		<div class="testbox">
			<p>相册工具preview</p>
			<img src="../assets/video.jpg" preview="0" preview-text="描述文字" width="600">
		</div>


		<!--图片压缩上传工具-->
		<div class="testbox">
			<p>图片压缩工具lrz</p>
			<input type="file" name="" id="file" accept="image/*" @change="onFileChange($event)">
			<p>压缩完毕的图片</p>
			<img :src="lrzImg" />
		</div>
	</div>
</template>

<script>
	// // @ is an alias to /src
	// import HelloWorld from "@/components/HelloWorld.vue";
	export default {
		name: "HelloWorld",
		components: {
			//HelloWorld
		},
		data() {
			return {
				data: [1, 2, 3],
				orgOptions: {},
				//获取缩略图地址,因为打包以后缩略图的地址会再后面加上hash值所以必须通过require引入
				imgSrc: require('../assets/video.jpg'),
				//图片压缩工具lrz
				lrzImg: ""
			}
		},
		methods: {
			myfun() {
				console.log(123);
			},
			//video.js
			initVideo() {
				//初始化视频方法
				let myPlayer = this.$video(document.getElementById("myVideo"), {
					//确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
					controls: true,
					//自动播放属性,muted:静音播放
					autoplay: "muted",
					//建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
					preload: "auto",
					//设置视频播放器的显示宽度（以像素为单位）
					width: "600px",
					//设置视频播放器的显示高度（以像素为单位）
					height: "330px"
				});
			},
			//echarts
			drawLine() {
				// 基于准备好的dom，初始化echarts实例
				let myChart = this.$echarts.init(document.getElementById('myChart'))
				// 绘制图表
				myChart.setOption({
					title: {
						text: '在Vue中使用echarts'
					},
					tooltip: {},
					xAxis: {
						data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
					},
					yAxis: {},
					series: [{
						name: '销量',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20]
					}]
				});
			},
			//jquery
			jqueryfun() {
				console.log("jquery已经正常工作!");
				$("#myname").hide()
			},
			//websocket
			// websocket() {
			// 	console.log(132);
			// 	this.$socket.emit('msg', "你好")
			// },
			//lrz图片压缩
			onFileChange(e) {
				// lrz压缩文档地址https://github.com/think2011/localResizeIMG/wiki/2.-%E5%8F%82%E6%95%B0%E6%96%87%E6%A1%A3
				// 当你是传多张的时候 你需要写一个循环 然后调用该函数
				let that = this;
				// this.files[0] 是用户选择的文件 第二个 {width: 1024} 是压缩条件
				lrz(e.target.files[0], {
						width: 240
					})
					.then(function(rst) {
						// 把处理的好的图片给用户看看呗
						var img = new Image();
						that.lrzImg = rst.base64;
						// img.src = rst.base64;
						// img.onload = function () {
						// 		document.body.appendChild(img);
						// };
						return rst;
					})
					.then(function(rst) {
						// 这里该上传给后端啦
						/* ==================================================== */
						// 原生ajax上传代码，所以看起来特别多 ╮(╯_╰)╭，但绝对能用
						// 其他框架，例如jQuery处理formData略有不同，请自行google，baidu。
						var xhr = new XMLHttpRequest();
						xhr.open('POST', 'http://localhost:5000/');

						xhr.onload = function() {
							if (xhr.status === 200) {
								// 上传成功
							} else {
								// 处理其他情况
							}
						};
						xhr.onerror = function() {
							// 处理错误
						};
						xhr.upload.onprogress = function(e) {
							// 上传进度
							var percentComplete = ((e.loaded / e.total) || 0) * 100;
						};
						// 添加参数
						rst.formData.append('fileLen', rst.fileLen);
						rst.formData.append('xxx', '我是其他参数');
						// 触发上传
						xhr.send(rst.formData);
						return rst;
					})
					.catch(function(err) {
						// 万一出错了，这里可以捕捉到错误信息
						// 而且以上的then都不会执行

						alert(err);
					})
					.always(function() {
						// 不管是成功失败，这里都会执行
					});
			}
		},
		mounted: function() {
			//测试axios
			// let that = this;
			// this.axios({
			// 	method: 'get',
			// 	url: 'index/query/list'
			// }).then(function(response) {
			// 	that.listData = response.data.result;
			// 	console.log("----------axios成功返回数据！----------");
			// 	console.log(response.data.result);
			// })

			//配置swiper
			// var mySwiper = new Swiper('.swiper-container', {
			// 	direction: 'horizontal', //垂直切换选项 horizontal横向 vertical竖直
			// 	loop: true, // 循环模式选项
			// 	// 如果需要分页器
			// 	pagination: {
			// 		el: '.swiper-pagination',
			// 	},
			// 	// 如果需要前进后退按钮
			// 	navigation: {
			// 		nextEl: '.swiper-button-next',
			// 		prevEl: '.swiper-button-prev',
			// 	},
			// 	// 如果需要滚动条
			// 	scrollbar: {
			// 		el: '.swiper-scrollbar',
			// 	},
			// })

			//websocket 开启websocket
			//this.websocket();

			//测试mockjs的数据
			// this.axios({
			// 	method: 'get',
			// 	url: 'http://api.com'
			// }).then(function(response) {
			// 	console.log("这是mockjs模拟数据----------");
			// 	console.log(response);
			// })

			//echarts
			this.drawLine();

			//video.js
			this.initVideo();
			
			console.log("longJs x1 原型 启动成功！");
			//long.js
			console.log(this.$long.str.czgjc("随便一段文本",["关键词"]));

		},
		metaInfo: {
			title: '通过metainfo修改的标题',
			meta: [{
				name: 'mateinfo',
				content: 'meteinfo',
			}]
		},
		sockets: {
			//接收后台发送来的数据
			msg(data) {
				console.log(data);
			}
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	//public
	.testbox {
		border: 1px solid #ccc;
		padding: 0 0 20px 0;
		background: #ddd;
		width: 700px;
		margin: 0 auto;
		margin-bottom: 20px;
	}

	.jquerytext {
		background: red;
		margin-bottom: 10px;
	}

	//swiper
	// .swiper-container {
	// 	width: 600px;
	// 	height: 300px;
	// 	background: #fff;
	// }
</style>
